<template>
  <div class="storeUp">
    <div style="height: 8px; background-color: rgba(0, 0, 0, 0.047)"></div>
    <!-- <div class="colItem">
      <div
        class="colItem1"
        :class=" isShow==1?'active':''"
        @click="btnClick(1)"
      >
        <span>手工圈</span>   
      </div>  
      <div>
        
      </div>
      <div
        class="colItem2"
        :class="isShow==2?'active':''"
        @click="btnClick(2)"
      >
        <span>教程</span>
      </div>
    </div>
    <div style="height: 8px"></div>
    <div class="allHang" v-show="handring">
        <div class="hang" v-show="isCol3" data-v-7043623d="">
          <div class="one" data-v-7043623d="">
            <div class="zuo" data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                alt=""
                data-v-7043623d=""
                style="height: 35px; width: 35px; border-radius: 50%"
              />
            </div>
            <div class="you" data-v-7043623d="">
              <div class="y_s" data-v-7043623d="">花花</div>
              <div class="y_x" data-v-7043623d="">
                <div class="y_x_z" data-v-7043623d="">2小时前</div>
                <div class="y_x_y" data-v-7043623d="">来自绘画</div>
              </div>
            </div>
          </div>
          <div class="two" data-v-7043623d="">宝玉宝玉宝玉宝玉</div>
          <div class="three" data-v-7043623d="">
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/1.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/3.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/4.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/1.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/3.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
          </div>
        </div>
      </div>
      <div v-show="!handring">12</div>
    <van-empty description="空空如也..." /> -->
    <van-tabs v-model:active="active">
      <van-tab title="手工圈">
        <!-- <van-empty description="空空如也..." /> -->
        <div class="allHang">
          <div class="hang" v-show="isCol3" data-v-7043623d="">
            <div class="one" data-v-7043623d="">
              <div class="zuo" data-v-7043623d="">
                <img
                  src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                  alt=""
                  data-v-7043623d=""
                  style="height: 35px; width: 35px; border-radius: 50%"
                />
              </div>
              <div class="you" data-v-7043623d="">
                <div class="y_s" data-v-7043623d="">花花</div>
                <div class="y_x" data-v-7043623d="">
                  <div class="y_x_z" data-v-7043623d="">2小时前</div>
                  <div class="y_x_y" data-v-7043623d="">来自绘画</div>
                </div>
              </div>
            </div>
            <div class="two" data-v-7043623d="">宝玉宝玉宝玉宝玉</div>
            <div class="three" data-v-7043623d="">
              <div data-v-7043623d="">
                <img
                  src="http://127.0.0.1:5173/src/components/cby/photo/1.jpg"
                  alt=""
                  data-v-7043623d=""
                />
              </div>
              <div data-v-7043623d="">
                <img
                  src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                  alt=""
                  data-v-7043623d=""
                />
              </div>
              <div data-v-7043623d="">
                <img
                  src="http://127.0.0.1:5173/src/components/cby/photo/3.jpg"
                  alt=""
                  data-v-7043623d=""
                />
              </div>
              <div data-v-7043623d="">
                <img
                  src="http://127.0.0.1:5173/src/components/cby/photo/4.jpg"
                  alt=""
                  data-v-7043623d=""
                />
              </div>
              <div data-v-7043623d="">
                <img
                  src="http://127.0.0.1:5173/src/components/cby/photo/1.jpg"
                  alt=""
                  data-v-7043623d=""
                />
              </div>
              <div data-v-7043623d="">
                <img
                  src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                  alt=""
                  data-v-7043623d=""
                />
              </div>
              <div data-v-7043623d="">
                <img
                  src="http://127.0.0.1:5173/src/components/cby/photo/3.jpg"
                  alt=""
                  data-v-7043623d=""
                />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="教程">
          <van-tabs v-model:active="actives">
            <van-tab
              :title="item"
              v-for="(item, index) in courseList"
              :key="index"
            >
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                        <span class="item" v-for="item in list" @click="ship_detail(1)">
                            <div class="item_img"></div>
                            <div class="item_title">
                                <span>扭扭棒郁金香</span>
                            </div>
                            <div class="item_money">
                                <span class="money">by花花</span><br>
                                <span class="payed">55收藏</span>
                            </div>
                        </span>

                    </van-list>
            </van-tab>
          </van-tabs>
      </van-tab>
    </van-tabs>

    <!-- <div style="height: 8px;background-color: rgba(0, 0, 0, 0.047);"></div> -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

import { Toast } from "vant";
const router = useRouter()
// const isShow = ref(1);
const isCol3 = ref(true);
// const handring = ref(true)
// function btnClick(index:any) {
//   isShow.value = index;

const courseList = reactive(["全部", "旧物改造", "饰品"]);

// }
const active = ref(0);
const actives = ref(0);
const loading = ref(false);
const list: any = ref([]);
const finished = ref(false);
const refreshing = ref(false);
const count = ref(0);
const onRefresh = () => {
      setTimeout(() => {
        Toast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };
//加载
const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            list.value = [];
            refreshing.value = false;
        }
        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1);
        }
        loading.value = false;
        Toast.clear()
        if (list.value.length >= 30) {
            finished.value = true;
            Toast({
                duration: 3000,
                message: '加载完毕',
            })
        }
    }, 1000);

};
function ship_detail(cc: any) {
    router.push({
        path: '/jc_tu',
        query: {
            id: cc
        }
    })
}
</script>
<style scoped>
.storeUp {
  /* width: 100%; */
  height: 100vh;
  /* background-color: rgba(0, 0, 0, 0.047); */
}
.colItem {
  height: 40px;
  background-color: white;
  display: flex;
  align-items: center;
  /* text-align: center; */
}
.colItem1,
.colItem2 {
  margin-left: 10px;
  font-size: 12px;
}
.active {
  padding: 5px;
  border-radius: 12px;
  background-color: rgba(233, 163, 174, 0.23);
  color: red;
}
.hang {
  padding: 10px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  background-color: white;
}

.one,
.two,
.three {
  margin: 5px 0px 5px 0px;
}

.three > div {
  width: 28vw;
  height: 100px;
  /* border: 1px solid black; */
  display: inline-block;
  margin: 0px 3px 3px 3px;
}

img {
  width: 29vw;
  height: 100px;
  display: inline-block;
  margin: 0px 3px 3px 3px;
}

.one {
  display: flex;
}

.zuo {
  height: 35px;
  width: 35px;
  border-radius: 50%;
}

.you {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.y_s {
  flex: 1;
  font-size: 15px;
}

.y_x {
  flex: 1;
  display: flex;
  font-size: 10px;
}

.y_x_z {
  color: #a4a4a4;
}

.y_x_y {
  margin-left: 10px;
  color: #a4a4a4;
}

.two {
  font-size: 15px;
  padding-left: 5px;
}
.item {
    box-sizing: border-box;
    display: inline-block;
    margin: 10px 10px 0px 10px;
    width: 42vw;
    height: 30vh;
    background-color: burlywood;
}

.item_img {
    width: 100%;
    height: 65%;
    background-image: url(@/components/cby/photo/2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 5px;
}

.item_title {
    /* height: 25%; */
    color: #fdfcf7;
    padding-left: 5px;
}

.item_title>span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    /* font-weight: 500; */
}

.item_money {
    /* height: 10%; */
    padding-left: 5px;
}

.item_money>.money {
    font-size: 10px;
    /* font-weight: 300; */
    color: #a29997;
    padding-right: 10px;
}

.item_money>.payed {
    font-size: 10px;
    color: #a29997;
}

</style>

